<template>
	<view>
		<view class="add_top">
			<form @submit="formSubmit">
				<view class=" uni-form-item-radio" @click="onRadio(form.default)">
					<radio class="radio-text" :checked="form.default" color="#FF6200" />
					设置默认收货地址
				</view>
				<view class="uni-form-item">
					<view class="title">收货人</view>
					<input class="uni-input" v-model="form.name" name="name" placeholder="请输入收货人" />
				</view>
				<view class="uni-form-item">
					<view class="title">手机号</view>
					<view class="uni-input-flex">
						<view class="uni-input-flex-left">+86</view>
						<input class="uni-input" v-model="form.mobile" style="padding-left: 97rpx;" name="mobile"
							placeholder="请输入手机号" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="title">所在地区</view>
					<view class="uni-input address" @tap="showMulLinkageThreePicker">
						<view class="placeholder" v-if="!form.province">省、市、区、街道</view>
						<view class="placeholder" v-else>{{ form.province + '/' + form.city + '/' + form.district }}
						</view>
						<van-icon name="arrow" class="address-icon" />
					</view>
					<cc-city-picker themeColor="#0BBBEF" ref="mpvueCityPicker"
						:pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel"
						@onConfirm="onConfirm"></cc-city-picker>
				</view>
				<view class="uni-form-item">
					<view class="title">详细地址</view>
					<input class="uni-input" v-model="form.address" name="address" placeholder="请输入小区、写字楼、门牌号等" />
				</view>
				<button form-type="submit" class="submit">保存</button>
			</form>
		</view>
	</view>
</template>

<script>
import { addAddress } from '@/api/api.js'
export default {
	data() {
		return {
			form: {
				name: "",
				phone: "",
				address: "",
				default: false,
				province: '',
				city: '',
				district: '',
			},
			id: '',
			cityPickerValueDefault: [0, 0, 0],
		}
	},
	onLoad(options) {
		if (options.item) {
			let form = JSON.parse(options.item)
			console.log(form)
			// if (form.address && form.address.indexOf('/') != -1) {
			// 	let arr = form.address.split('/')
			// 	form.address = arr[0]
			// 	form.addressDetsil = arr[1]
			// }
			this.id = form.id
			console.log(form)
			this.form = form
			// this.id = options.id
			// options.default = options.default == 1 ? true : false
			// this.form = options
		}

	},
	methods: {
		// 三级联动选择
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(e) {
			console.log(e)
			let arr = e.label.split('-')
			this.form.province = arr[0]
			this.form.city = arr[1]
			this.form.district = arr[2]
		},
		onCancel(e) {
			console.log(e)
		},

		onRadio(e) {
			this.form.default = e ? false : true
		},
		formSubmit(e) {
			let formdata = e.detail.value
			formdata.province = this.form.province
			if (!formdata.name) {
				uni.showToast({
					title: '请输入收货人姓名',
					icon: 'none'
				})
				return
			}
			if (!formdata.mobile) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			if (!formdata.province) {
				uni.showToast({
					title: '请选择地址',
					icon: 'none'
				})
				return
			}
			if (!formdata.address) {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				})
				return
			}
			let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
			if (!reg.test(formdata.mobile)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			formdata.default = this.form.default ? 1 : 0
			formdata.city = this.form.city
			formdata.district = this.form.district
			if (this.id) {
				formdata.id = this.id
				formdata.type = 'edit'
			} else {
				formdata.type = 'add'
			}


			addAddress(formdata).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						let pages = getCurrentPages()
						// 2. 上一页面实例
						// 注意是length长度，所以要想得到上一页面的实例需要 -2
						// 若要返回上上页面的实例就 -3，以此类推
						let prevPage = pages[pages.length - 2]
						prevPage.$vm.getList()

						// 4. 返回上一页面
						uni.navigateBack({
							delta: 1 // 返回的页面数
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})


		},

	},

}

</script>

<style lang="scss">
page {
	background-color: #fff;
}

.add_top {
	padding: 30upx;
}

.uni-form-item-radio {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 30upx;
	color: #333333;

	.radio-text {
		transform: scale(0.7)
	}
}

.uni-form-item {
	padding: 30upx 0;

	.title {
		font-size: 30upx;
		color: #333333;
		margin-bottom: 10upx;
	}

	.uni-input {
		background-color: #F5F5F5;
		border-radius: 12upx;
		opacity: 0.6;
		padding: 28upx 20upx;
		font-size: 26upx;
	}

	.uni-input-flex {
		position: relative;
	}

	.uni-input-flex-left {
		position: absolute;
		left: 20upx;
		top: 30upx;
		color: #333333;
		font-size: 30upx;
	}

	.address {
		// width: 100%;
		height: 38upx;
		position: relative;

		.address-icon {
			position: absolute;
			right: 30upx;
			top: 30upx;
			font-size: 30upx;
		}

		.placeholder {
			font-size: 26upx;
			color: #939393;
		}
	}
}

.submit {
	background-color: #359BEF;
	border-radius: 50upx;
	color: #fff;
	font-size: 30upx;
	position: absolute;
	bottom: 100upx;
	width: calc(100% - 60upx);
}
</style>